<template>
  <div class="form-item-attr">
    <a-tabs v-model:activeKey="data_.currentTab" centered>
      <a-tab-pane key="field" tab="组件属性" />
      <a-tab-pane key="form" tab="表单属性" />
    </a-tabs>
    <div class="attr-list">
      <a v-if="activeData" class="document-links" target="_blank" :href="documentLink" title="组件文档">
        <link-outlined />
      </a>
      <div class="attr-list-scrollbar">
        <!-- 组件属性 -->
        <template v-if="activeData">
          <a-form v-show="data_.currentTab === 'field'" size="small" laba-width="90px">
            <a-form-item v-if="activeData.__vModel__ !== undefined" label="字段">
              <a-input v-model:value="activeData.__vModel__" placeholder="请输入字段名（v-model）" />
            </a-form-item>
            <a-form-item v-if="activeData.__config__.componentName !== undefined" label="组件名">
              {{ activeData.__config__.componentName }}
            </a-form-item>
            <a-form-item v-if="activeData.__config__.label !== undefined" label="标题">
              <a-input v-model:value="activeData.__config__.label" placeholder="请输入标题" />
            </a-form-item>
            <a-form-item v-if="activeData.placeholder !== undefined" label="占位提示">
              <a-input v-model:value="activeData.placeholder" placeholder="请输入占位提示" />
            </a-form-item>
            <a-form-item v-if="activeData.__config__.span !== undefined" label="组件栅格">
              <a-slider v-model:value="activeData.__config__.span" :min="6" :max="24" @change="spanChange" />
            </a-form-item>
            <a-form-item v-if="activeData.style && activeData.style.width !== undefined" label="组件宽度">
              <a-input v-model:value="activeData.style.width" placeholder="请输入组件宽度 支持%、px" clearable />
            </a-form-item>
            <a-form-item v-if="activeData.__vModel__ !== undefined" label="默认值">
              <a-input v-model:value="activeData.__config__.defaultValue" placeholder="请输入默认值" />
            </a-form-item>
            <a-form-item v-if="activeData.__slot__ && activeData.prefix !== undefined" label="前缀">
              <a-input v-model:value="activeData.prefix" placeholder="请输入前缀" />
            </a-form-item>
            <a-form-item v-if="activeData.__slot__ && activeData.suffix !== undefined" label="后缀">
              <a-input v-model:value="activeData.suffix" placeholder="请输入后缀" />
            </a-form-item>
            <a-form-item v-if="activeData.autoSize !== undefined" label="最小行数">
              <a-input-number v-model:value="activeData.autoSize.minRows" :min="1" placeholder="最小行数" />
            </a-form-item>
            <a-form-item v-if="activeData.autoSize !== undefined" label="最大行数">
              <a-input-number v-model:value="activeData.autoSize.maxRows" :min="1" placeholder="最大行数" />
            </a-form-item>
            <a-form-item v-if="isShowMin" label="最小值">
              <a-input-number v-model:value="activeData.min" placeholder="最小值" />
            </a-form-item>
            <a-form-item v-if="isShowMax" label="最大值">
              <a-input-number v-model:value="activeData.max" placeholder="最大值" />
            </a-form-item>
            <a-form-item v-if="activeData.__config__.tag === 'a-input-number'" label="精度">
              <a-input-number v-model:value="activeData.precision" :min="0" placeholder="精度" />
            </a-form-item>
            <a-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
              <a-input-number v-model:value="activeData.maxlength" style="width: 100%" :min="0" placeholder="请输入字符长度">
                <template #addonAfter>个字符</template>
              </a-input-number>
            </a-form-item>
            <a-form-item
              v-if="'a-date-picker' === activeData.__config__.tag || 'a-range-picker' === activeData.__config__.tag"
              label="时间类型">
              <a-select v-model:value="activeData.picker" :options="data_.dateTypeOptions" placeholder="请选择时间类型"
                :style="{ width: '100%' }" allow-clear @change="dateTypeChange" />
            </a-form-item>
            <a-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
              <a-input v-model:value="activeData['picker-options'].selectableRange" placeholder="请输入时间段" />
            </a-form-item>
            <a-form-item v-if="activeData.format !== undefined" label="时间格式">
              <a-input v-model:value="activeData.format"
                :disabled="activeData.picker && !dateTimeFormat[activeData.picker]" placeholder="请输入时间格式"
                @change="setTimeValue($event)" />
            </a-form-item>
            <template v-if="['a-checkbox-group', 'a-radio-group', 'a-select'].indexOf(activeData.__config__.tag) > -1">
              <a-divider>下拉选项</a-divider>
              <draggable :list="activeData.options" :animation="340" group="selectItem" handle=".option-drag"
                item-key="label">
                <template #item="{ element, index }">
                  <div class="select-item">
                    <div class="select-line-icon option-drag">
                      <drag-outlined />
                    </div>
                    <a-input v-model:value="element.label" placeholder="选项名" size="small" />
                    <a-input placeholder="选项值" size="small" :value="element.value"
                      @change="setOptionValue(element, $event)" />
                    <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
                      <MinusCircleOutlined />
                    </div>
                  </div>
                </template>
              </draggable>
              <div style="margin-left: 20px">
                <a-button style="padding-bottom: 0" type="link" @click="addSelectItem">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  添加选项
                </a-button>
              </div>
              <a-divider />
            </template>
            <a-form-item v-if="activeData['showCount'] !== undefined" label="输入统计">
              <a-switch v-model:checked="activeData['showCount']" />
            </a-form-item>
            <a-form-item v-if="activeData.allowClear !== undefined" label="能否清空">
              <a-switch v-model:checked="activeData.allowClear" />
            </a-form-item>
            <a-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
              <a-switch v-model:checked="activeData.__config__.showTip" />
            </a-form-item>
            <a-form-item v-if="activeData.readonly !== undefined" label="是否只读">
              <a-switch v-model:checked="activeData.readonly" />
            </a-form-item>
            <a-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
              <a-switch v-model:checked="activeData.disabled" />
            </a-form-item>
            <a-form-item v-if="activeData.__config__.tag === 'a-select'" label="能否搜索">
              <a-switch v-model:checked="activeData.filterable" />
            </a-form-item>
            <a-form-item v-if="activeData.__config__.required !== undefined" label="是否必填">
              <a-switch v-model:checked="activeData.__config__.required" />
            </a-form-item>
          </a-form>
        </template>
        <template v-else-if="data_.currentTab === 'field'">
          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="未选中组件" />
        </template>
        <!-- 表单属性 -->
        <a-form v-show="data_.currentTab === 'form'" size="small" laba-width="90px">
          <a-form-item label="表单名">
            <a-input v-model:value="formConf.formRef" placeholder="请输入表单名（ref）" />
          </a-form-item>
          <a-form-item label="表单模型">
            <a-input v-model:value="formConf.formModel" placeholder="请输入数据模型" />
          </a-form-item>
          <a-form-item label="校验模型">
            <a-input v-model:value="formConf.formRules" placeholder="请输入校验模型" />
          </a-form-item>
          <a-form-item label="标签对齐">
            <a-radio-group v-model:value="formConf.labelAlign">
              <a-radio-button value="left"> 左对齐 </a-radio-button>
              <a-radio-button value="right"> 右对齐 </a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="栅格间隔">
            <a-input-number v-model:value="formConf.gutter" :min="0" placeholder="栅格间隔" />
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue';
import draggable from 'vuedraggable';
import { PlusOutlined, DragOutlined, MinusCircleOutlined, LinkOutlined } from '@ant-design/icons-vue';
import { Empty } from 'ant-design-vue';

const dateTimeFormat: any = {
  date: 'YYYY-MM-DD',
  week: '',
  month: 'YYYY-MM',
  year: 'YYYY',
  datetime: 'YYYY-MM-DD HH:mm:ss',
  daterange: 'YYYY-MM-DD',
  monthrange: 'YYYY-MM',
  datetimerange: 'YYYY-MM-DD HH:mm:ss',
};

const props = defineProps({
  activeData: {
    type: Object,
    default: {},
  },
  formConf: {
    type: Object,
    default: {},
  },
});

const data_ = reactive({
  currentTab: 'field',
  dateTypeOptions: [
    {
      label: '日期(date)',
      value: 'date',
    },
    {
      label: '周(week)',
      value: 'week',
    },
    {
      label: '月(month)',
      value: 'month',
    },
    {
      label: '年(year)',
      value: 'year',
    },
  ],
});

const documentLink = computed(() => {
  return props.activeData.__config__?.document || 'https://2x.antdv.com/docs/vue/introduce-cn';
});

const activeTag = computed(() => {
  return props.activeData.__config__.tag;
});

const isShowMin = computed(() => {
  return ['a-input-number'].indexOf(activeTag.value) > -1;
});

const isShowMax = computed(() => {
  return ['a-input-number'].indexOf(activeTag.value) > -1;
});

const addSelectItem = () => {
  props.activeData.options.push({
    label: '',
    value: '',
  });
};
const setOptionValue = (item: any, obj: any) => {
  if (obj?.target?.value === undefined) return item.value = '';
  item.value = '' + obj.target.value
  console.log(item);
};
const setTimeValue = (e: any, type?: any) => {
  const valueFormat = e;
  if (type) {
    props.activeData.format = valueFormat;
  }
  props.activeData.__config__['defaultValue'] = null;
  props.activeData['valueFormat'] = valueFormat;
};
const spanChange = (val: any) => {
  props.formConf.span = val;
};
const dateTypeChange = (val: any) => {
  setTimeValue(val ? dateTimeFormat[val] : dateTimeFormat['date'], val ? val : 'date');
};
</script>

<style lang="less" scoped>
.form-item-attr {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .attr-list {
    position: relative;
    flex: 1;
    box-sizing: border-box;

    .document-links {
      position: absolute;
      display: inline-block;
      width: 26px;
      height: 26px;
      top: -10px;
      left: 0;
      cursor: pointer;
      background: #409eff;
      z-index: 1;
      text-align: center;
      line-height: 26px;
      color: #fff;
      font-size: 18px;
    }

    .attr-list-scrollbar {
      height: 100%;
      overflow-y: auto;
      padding: 20px;
    }
  }
}

.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .ant-input+.ant-input {
    margin-left: 4px;
  }
}

.select-item+.select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

.option-drag {
  cursor: move;
}

.time-range {
  .ant-date-editor {
    width: 227px;
  }

  :deep(.ant-icon-time) {
    display: none;
  }
}


.ant-form-item {
  margin-bottom: 18px;
}
</style>
